<?php
//======================================================================================
//
// Function: Main menu
//
// Programmer: JKJ
// Date : 2025-04-16
//
// Copyright Reeft A/S (c) - 2025
//======================================================================================
// http://www.openjs.com/scripts/events/keyboard_shortcuts/
// https://htmlcolorcodes.com/color-names/
//======================================================================================
// General config
//======================================================================================
include "config/config.php";
//======================================================================================
// Check if user is logged in?
//======================================================================================
include "login_check.php";
//======================================================================================
// Get session variables
//======================================================================================
include "include/getsession.php";
//======================================================================================
// Set language
//======================================================================================
include "include/set_language.php";
//======================================================================================
// Set defaults
//======================================================================================
// $referenceCode = $_SESSION['session_dft_referencecode'];
// $referenceName = $_SESSION['session_dft_referencename'];
//echo '<pre>' . print_r($_SESSION, TRUE) . '</pre>';
//======================================================================================
// Get permission and set classes
//======================================================================================
//======================================================================================
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $reeft_text0001 ?></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="REEFTvisual - Stoptime">
<meta name="author" content="REEFT A/S">
<link rel="icon" href="images/favicon/favicon.ico">
<link href="css/custom.css" rel="stylesheet">
<!-- Bootstrap / jQuery -->
<link href="css/bootstrap4.3.1/css/bootstrap.custom.min.css" rel="stylesheet">
<link href="css/bootstrap4.3.1/css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/sticky-footer.css" rel="stylesheet" type="text/css">
<script src="css/fontawesome6.5.1/js/all.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-light.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-regular.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-solid.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-thin.min.js"></script>
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--<link href="css/bootstrap_animation/css/animate.css" rel="stylesheet" type="text/css">-->
<link href="css/bootstrap_animation/css/animate4/animate.css" rel="stylesheet" type="text/css">
<link href="javascript/chosen/chosen.css" rel="stylesheet" type="text/css">
<link href="javascript/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="javascript/jquery.js"></script>
<script src="css/bootstrap4.3.1/js/popper.js"></script>
<script src="css/bootstrap4.3.1/js/bootstrap.min.js"></script>
<script src="javascript/jquery-ui/jquery-ui.min.js"></script>
<script src="javascript/jquery.ui.touch-punch.min.js"></script>
<script src="javascript/moment.min.js"></script>
<script src="javascript/moment-with-locales.min.js"></script>
<script src="javascript/moment-duration-format.min.js"></script>
<script src="javascript/number_format/jquery.number.min.js"></script>
<script src="javascript/jquery.scrollTo.min.js"></script>
<link href="javascript/daatatables/media/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="javascript/daatatables/media/css/fixedHeader.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="javascript/daatatables/Buttons-1.4.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="javascript/daatatables/media/js/jquery.dataTables.min.js"></script>
<script src="javascript/daatatables/media/js/dataTables.fixedHeader.min.js"></script>
<script src="javascript/daatatables/Buttons-1.4.2/js/dataTables.buttons.min.js"></script>
<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.flash.min.js"></script>
<script src="javascript/daatatables/JSZip-2.5.0/jszip.min.js"></script>
<script src="javascript/daatatables/pdfmake-0.1.53/pdfmake.min.js"></script>
<script src="javascript/daatatables/pdfmake-0.1.53/vfs_fonts.js"></script>
<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.html5.min.js"></script>
<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.print.min.js"></script>
<script src="javascript/chosen/chosen.jquery.min.js" type="text/javascript"></script>
<script src="javascript/viewer-master/dist/viewer.min.js"></script>
<link href="javascript/viewer-master/dist/viewer.min.css" rel="stylesheet">
<script src="javascript/ajaxq/ajaxq.js"></script>
<link id="scrollUpTheme" rel="stylesheet" href="javascript/scrollup-master/dist/css/themes/image.css">
<script src="javascript/scrollup-master/dist/jquery.scrollUp.js"></script>
<script src="javascript/shortcut.js"></script>
<script src="javascript/_reeft_js/set_font_awesome_icon_type.js"></script>
<script src="javascript/_reeft_js/date_convert.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/chart.min.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/utils.js"></script>
<script type="text/javascript" src="javascript/jspdf.min.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/chartjs-plugin-datalabels.min.js"></script>
<style>
.btn-custom-wide {
height:60px;
width:210px;
}
xcanvas {
max-width: 100%;
height: auto;
padding-right: 40px; /* Optional CSS backup */
}
</style>
<script language="JavaScript">
//=============================================================================
// Globals
//=============================================================================
var DFT_DATE_DISPLAY_FORMAT = '<?php echo $DFT_DATE_DISPLAY_FORMAT ?>';
var DFT_LANGUAGE = '<?php echo $DFT_LANGUAGE ?>';
// function setFontAwesomeIconType will be run in .ready, value is from config/config.php
var iconType = '<?php echo $DFT_SET_FONT_AWESOME_ICON_TYPE ?>';
$(function () {
$.scrollUp({
scrollName: 'scrollUp', // Element ID
//topDistance: '1800', // Distance from top before showing element (px)
//topSpeed: 300, // Speed back to top (ms)
scrollDistance: '300', // Distance from top before showing element (px)
scrollSpeed: 300, // Speed back to top (ms)
animation: 'fade', // Fade, slide, none
animationInSpeed: 200, // Animation in speed (ms)
animationOutSpeed: 200, // Animation out speed (ms)
scrollText: false, //'Scroll to top', // Text for element
activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
});
});
//=============================================================================
// Log off
//=============================================================================
function signoff()
{
window.location.href = "logout.php";
}
//=============================================================================
// Load page
//=============================================================================
function loadPage(url, p1, p2, p3)
{
window.location.href = url;
}
//=============================================================================
// Full screen popup
//=============================================================================
function popUpFull(url, p1, p2, p3)
{
var v1_w = screen.availWidth;
var v1_h = screen.availHeight;
if ( parseInt(v1_w) > 1800 ) {
v1_w = 1800;
v1_h = v1_h - 200;
v1_center = v1_w/0.8;
}
// Center popup as good as possible
var left = (screen.width - v1_w) / 2;
var top = (screen.height - v1_h) / 4;
var winname = 'win_' + url;
params = 'width='+v1_w;
params += ', height='+v1_h;
params += ', top=' + top + ', left=' + left;
params += ', fullscreen=yes';
params += ',scrollbars=1';
overview_win = window.open(url,winname, params);
if (window.focus) {overview_win.focus()}
return false;
}
//=============================================================================
// Get customer data for the Dashboard
//=============================================================================
function getCustomerData()
{
var parmData = 'data=' + 'result'
+ '&mode=' + 'mode'
;
$.ajax({
url: "customer_maintain_dashboard_get.php",
type: "POST",
data: parmData,
dataType: "json",
cache: false,
})
.done(function( jsonData ) {
var recordsTotalActiveFormat = jsonData.header.recordsTotalActiveFormat;
var recordsTotalInactiveFormat = jsonData.header.recordsTotalInactiveFormat;
var recordsTotalFormat = jsonData.header.recordsTotalFormat;
$('#customer-menu-active').html( recordsTotalActiveFormat );
$('#customer-menu-inactive').html( recordsTotalInactiveFormat );
$('#customer-menu-total').html( recordsTotalFormat );
// Create a simple chart
createCustomerChart();
})
.always(function( jsonData ) {
})
.fail(function( xhr, ajaxOptions, thrownError ) {
console.log('I am failed..');
console.log( xhr );
});
}
//=============================================================================
// Create customer chart
//=============================================================================
function createCustomerChart() {
// const active = 181;
// const inactive = 221;
// const total = active + inactive;
var active = $('#customer-menu-active').text();
var inactive = $('#customer-menu-inactive').text();
var total = $('#customer-menu-total').text();
// Make numeric for fuck sake...
var active = parseInt( active );
var inactivee = parseInt( inactive );
var Total = parseInt( total );
const ctx = document.getElementById('customerChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Active', 'Inactive'],
datasets: [{
label: 'Customer Records',
data: [active, inactive],
backgroundColor: ['#4CAF50', '#F44336']
}]
},
options: {
layout: {
padding: {
right: 70 // ⬅️ Increase this value to give more space
}
},
indexAxis: 'y',
responsive: true,
animation: false, // No animation
// animation: {
// duration: 1200,
// easing: 'easeOutBack',
// delay: (ctx) => ctx.dataIndex * 300 // stagger animation
// },
plugins: {
title: {
display: false,
text: 'Customer Status Overview'
},
legend: {
display: false
},
datalabels: {
anchor: 'end',
align: 'right',
color: 'black',
font: {
weight: 'bold'
},
formatter: function(value) {
if (total != 0) {
const percent = ((value / total) * 100).toFixed(1);
return `${value.toLocaleString()} (${percent}%)`;
} else {
return `0 (0%)`;
}
}
}
},
scales: {
x: {
beginAtZero: true,
ticks: {
display: false
},
grid: {
display: false,
drawBorder: false
}
},
y: {
grid: {
display: false
}
}
}
},
plugins: [ChartDataLabels]
});
}
//=============================================================================
// Set clock
//=============================================================================
function updateClock() {
var currentTime = moment().format('YYYY-MM-DD HH:mm:ss');
currentTime = REEFT_format_date( currentTime, DFT_DATE_DISPLAY_FORMAT )
$('#current-time').html( currentTime );
}
//=============================================================================
// jQuery - Ready
//=============================================================================
$(document).ready(function()
{
//-----------------------------------------------------------------------
// Start the clock
//-----------------------------------------------------------------------
updateClock();
setInterval(function() {
updateClock();
}, 1000);
//-----------------------------------------------------------------------
// Get customer data
getCustomerData();
// Set font awesome icon type
setFontAwesomeIconType( iconType );
// Log off
shortcut.add("Alt+Q",function() {
$('#signoff-button').click();
});
});
// -->
</script>
</head>
<body>
<div class="container-fluid mt-2">
<div class="row">
<div class="col-2">
<img src="images/customer-logo.png" class="img-fluid" alt="Customer Logo">
</div>
<div class="col-8 text-center <?php echo $DFT_CLOCK_SIZE ?>">
<i onclick="popUpFull('help_tools/signals.php')" class="font-awesome-pseudo-class fa-thin fa-clock"></i> <span id="current-time" class="clock"><?php echo date('d-m-Y h:i:s') ?></span>
</div>
<div class="col-2 text-right">
<div class="">
<div class="btn btn-primary mb-1" onclick="loadPage('menu_main.php','','','')" title="<?php echo $reeft_go_to_my_dear_home ?>"><i class="font-awesome-pseudo-class fa-2x fa-thin fa-home"></i></div>
<div class="btn btn-danger mb-1" id="signoff-button" onclick="signoff()" title="Sign off"><i class="font-awesome-pseudo-class fa-thin fa-2x fa-right-from-bracket"></i></div>
</div>
</div>
</div>
<!-- Re-logon area -->
<div class="row d-none" id="re-login-area">
<div class="col text-right">
<div id="data-result-reference"></div>
</div>
</div>
<div class="card mt-2">
<div class="card-header text-muted">
<div class="row mt-2">
<div class="col h4">
<i class="font-awesome-pseudo-class fa-1x fa-thin fa-home"></i> <span id="explain-text"><?php echo "$reeft_text0004"; ?></span>
</div>
<div class="col h2 text-center">
<span class="font-weight-bold"><?php echo "$session_rpyCMPNO_Name" ?></span>
</div>
<div class="col text-right">
<div style="font-size: 2.1em"><?php echo "$session_dft_username"; ?></div>
</div>
</div>
<div class="row mt-2 border border-dark p-1 rounded d-none">
<div class="col h6 text-success font-weight-bold">
Active customers
<div id="customer-menu-active">.</div>
</div>
<div class="col h6 text-info font-weight-bold text-center">
Total Customers
<div id="customer-menu-total....">.</div>
</div>
<div class="col h6 text-danger font-weight-bold text-right">
Inactive customers
<div id="customer-menu-inactive">.</div>
</div>
</div>
</div>
<div class="card-body">
<!-- Message if screen is not wide enough -->
<div class="container-fluid mt-2 mb-4 d-block d-lg-none">
<div id="general-message-top" class="border border-danger rounded p-2 text-danger font-weight-boldx"><?php echo $reeft_error0040a ?></div>
</div>
<!-- Message if screen is not wide enough -->
<div class="d-none d-lg-block ">
<div class="row">
<div class="col-6">
<div style="font-size: 2.1em"><?php echo $reeft_text0257 ?>: <span id="customer-menu-total">.</span></div>
</div>
<div class="col-6">
<canvas class="border float-right" id="customerChart" style="max-width:100%" height="16px"></canvas>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<button type="button" onclick="loadPage('customer_maintain.php','','','')" class="btn btn-primary btn-block btn-lgx mb-2 h2 text-truncate"><i class="font-awesome-pseudo-class fa-2x fa-thin fa-people"></i><br><?php echo "$reeft_text0138"; ?></button>
</div>
</div>
</div>
</div>
</div>
<!-- Set footer -->
<?php
include "include/footer.php";
?>
<!-- Set footer -->
<!-- ========================================================================== -->
<!-- M O D A L S -->
<!-- ========================================================================== -->
<!-- Modal start - Prompt for update -->
<!-- Modal end -->
</body>
</html>